<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期级联菜单</title>
    <script>
        <!--      18删除节点处-->


        window.onload = function () {
            let yearSelect = document.getElementById("year");
            yearSelect.length = 1;
            const now = new Date().getFullYear();
            for (let i = now; i >= now - 30; i--) {
                let opt = document.createElement("option");
                opt.value = i;
                opt.textContent = i + "年";
                yearSelect.appendChild(opt);
            }
            let monthSelect = document.getElementById("month");
            monthSelect.length = 1;
            for (let i = 1; i <= 12; i++) {
                let opt = document.createElement("option");
                opt.value = i;
                opt.textContent = i + "月";
                monthSelect.appendChild(opt);
            }

        }
        function fn() {
            let year = +document.getElementById('year').value;
            let month = +document.getElementById('month').value;
            let daySelect = document.getElementById('day');
            daySelect.length = 1;
            if (year === -1 || month === -1) return;
            // 本月最后一天
            let date = new Date(year, month, 0);
            // 本月最后一天获取当前日期是本月第几天,则表示这个月共有多少天
            let countDay = date.getDate();
            for (let i = 1; i <= countDay; i++) {
                let opt = document.createElement('option');
                opt.value = i;
                opt.textContent = i + '日';
                daySelect.appendChild(opt);
            }
        }

    </script>
</head>
<body>
<!--
    需求一:在页面加载之后完成两个操作
        1.加载年份,其年份的值为当前年份的前三十年
        2.加载月份,月份的值为1-12
    需求二:加载天数
        当用户选择了合法的年份与月份之后,根据选择的年份与月份加载正确的天数
-->
<select id="year" onchange="fn()">
    <option value="-1">请选择年份</option>
</select>
<select id="month" onchange="fn()">
    <option value="-1">请选择月份</option>
</select>
<select id="day">
    <option value="-1">请选择天数</option>
</select>
</body>
</html>